<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>普陀区知识图谱</title>

    <link rel="stylesheet" href="./src/css/index.css">
    <script src="./src/libs/three.js"></script>



    <script src="./src/libs/SMAAShader.js"></script>
    <script src="./src/libs/Pass.js"></script>
    <script src="./src/libs/ShaderPass.js"></script>
    <script src="./src/libs/SMAAPass.js"></script>

    <script src="./src/libs/CSS2DRenderer.js"></script>
    <script src="./src/libs/3d-force-graph.js"></script>
</head>
<body>
<div id="graph"></div>


<script type="x-shader/x-vertex" id="vs">

    uniform vec2 resolution;
    uniform vec3 center;
    uniform vec3 start;
    uniform vec3 end;
    uniform float time;

    attribute float vIndex;

    out vec2 vUv;
    out float percent; //当前点占箭头长度百分比
    out float widthPercent; //当前点占宽度百分比(-1 ~ 1)
    out float length; //箭头总长度
    out float arrowSWidth;

    out float whitePercentStart; //白条开始百分比
    out float whitePercentEnd; //白条结束百分比





    //转换到等比例屏幕坐标（单位长度一致）
    vec3 toSquareScreenCoord( vec3 inCoord ){

        float deviceWH = resolution.x / resolution.y; //分辨率宽度是高度的倍数

        inCoord.x *= deviceWH;
        return vec3( inCoord.xyz );
    }

    //转换到屏幕坐标
    vec3 toScreenCoord( vec3 inCoord ){

        float deviceWH = resolution.x / resolution.y; //分辨率宽度是高度的倍数

        inCoord.x /= deviceWH;
        return vec3( inCoord.xyz );
    }


    void main() {

        arrowSWidth = 8.0; //箭头面宽度

        vec4 startSWPostion = projectionMatrix * modelViewMatrix * vec4( start, 1.0 );
        vec4 endSWPosition = projectionMatrix * modelViewMatrix * vec4( end, 1.0 );

        vec3 startSPostion = startSWPostion.xyz / startSWPostion.w; //屏幕坐标
        vec3 endSPosition = endSWPosition.xyz / endSWPosition.w;
        vec3 sStartSPostion = toSquareScreenCoord( startSPostion ); //等比例屏幕坐标
        vec3 sEndSPosition = toSquareScreenCoord( endSPosition );

        length = distance(vec3( sStartSPostion.xy, 0.0), vec3( sEndSPosition.xy, 0.0) ); //起点-终点 等比例坐标长度


        vec3 direction = normalize( vec3( sEndSPosition.xy, 0.0) - vec3( sStartSPostion.xy, 0.0) ); //起点-终点 等比例方向
        vec3 widthDir= normalize( cross( direction, vec3(0.0, 0.0, 1.0)) ); //等比例宽度方向
        widthDir = toScreenCoord(widthDir); //屏幕宽度方向

        float widthDirPixelCount = sqrt( pow( widthDir.x * resolution.x , 2.0) +  pow( widthDir.y * resolution.y , 2.0) );
        vec3 arrowSWidthDir = widthDir * arrowSWidth / widthDirPixelCount;


        if(vIndex < 2.0){

            if(vIndex == 0.0) startSPostion += arrowSWidthDir;
            else startSPostion -= arrowSWidthDir;

            gl_Position = vec4( startSPostion * startSWPostion.w, startSWPostion.w);
            percent = 0.0;
        }
        else{
            if(vIndex == 3.0) endSPosition += arrowSWidthDir;
            else endSPosition -= arrowSWidthDir;

            gl_Position = vec4( endSPosition * endSWPosition.w, endSWPosition.w);
            percent = 1.0;
        }

        if(vIndex > 0.0 && vIndex < 3.0) widthPercent = 1.0;
        else widthPercent = -1.0;


        //其他需要传值变量的计算
        vUv = uv;

        float whiteLengthPercent = 0.02 / length; //白条应战百分比
        whitePercentStart = time;
        whitePercentEnd = time + whiteLengthPercent;

    }

</script>

<script type="x-shader/x-fragment" id="fs">

    uniform vec3 startColor;
    uniform vec3 endColor;
    uniform float time;

    in vec2 vUv;
    in float length;
    in float percent;
    in float widthPercent;

    in float whitePercentStart; //白条开始百分比
    in float whitePercentEnd; //白条结束百分比


    void main() {

        bool noArrow = length < 0.1; //是否无箭头
        vec3 gradientColor = mix( startColor, endColor, percent);

        float arrowStartPercent = 1.0 - ( 0.02 / length); //箭头开始处应占百分比
        bool atArrow = percent > arrowStartPercent; //是否在箭头上
        float atArrowPercent = ( percent - arrowStartPercent ) / (1.0 - arrowStartPercent);
        float y = widthPercent;


        if(atArrow && !noArrow) {
            float x = atArrowPercent;
            if(y > 1.0 - x || y < x - 1.0) discard;
        }
        else{
            if( abs(y) > 0.3 ) discard;
        }


        if(percent > whitePercentStart && percent < whitePercentEnd){
            gradientColor = mix( vec3(1.0), gradientColor, 0.6);
        }

        gl_FragColor = vec4( gradientColor, 1.0);

    }

</script>

<!--<script src="./src/index.js"></script>-->
<script src="./dist/main.js"></script>
</body>
</html>